<template>
  <!-- 结果确认弹窗 -->
  <el-dialog title="心肺耐力测试结果确认" v-model="dialogVisible" width="896px" header-class="headerDialog">
    <div class="resultContent">
      <p>终止原因：</p>
      <div class="flex radioBox">
        <div v-for="item, key in content.terminationReasonOption" :key="key" :class="formData.terminationReason == item.value && 'active'">
          <input type="radio" name="reason" class="radio-appearance" :value="item.value" v-model="formData.terminationReason" />
          <span>{{ item.label }}</span>
        </div>
      </div>
      <p>自感用力度：</p>
      <div class="flex radioBox">
        <div v-for="item, key in content.perceivedExertionOption" :key="key" :class="formData.perceivedExertion == item.value && 'active'">
          <input type="radio" name="perceived" class="radio-appearance" :value="item.value" v-model="formData.perceivedExertion" />
          <span>{{ item.label }}</span>
        </div>
      </div>
      <p>运动中症状风险：</p>
      <div class="flex radioBox">
        <div v-for="item, key in content.exerciseSymptomRiskOption" :key="key" :class="formData.symptom == item.value && 'active'">
          <input type="radio" name="risk" class="radio-appearance" :value="item.value" v-model="formData.symptom" />
          <span>{{ item.label }}</span>
        </div>
      </div>
      <div v-for="item, key in content.resultList" :key="key" :class="['row', 'flex', selectIndex == key && 'active']">
        <div>
          <span>{{ item.stageCompare }}阶段结果</span>
          <p><b>{{ item.vmax }}</b>ml/kg/min</p>
        </div>
        <div>{{ item.desc }}</div>
        <div>
          <input type="radio" name="result" class="radio-appearance" :value="key" v-model="selectIndex" />
        </div>
      </div>
      <div class="btnSubmit" @click="confirm">确认</div>
    </div>
  </el-dialog>
</template>

<script>
import { getRecord, submitResult } from '@/api'
import { ElDialog } from 'element-plus'
export default {
  name: "ResultDialog",
  components: { ElDialog },
  props: ['testSign', 'userSign', 'url'],
  data() {
    return {
      content: {},
      selectIndex: 0,
      formData: {},
      dialogVisible: false
    }
  },
  methods: {
    // 展示结果
    show() {
      getRecord({testSign: this.testSign}).then(res => {
        this.selectIndex = res.resultList.findIndex(v => v.selected) || 0
        this.formData.terminationReason = res.terminationReasonOption[0].value
        this.formData.perceivedExertion = res.perceivedExertionOption[0].value
        this.formData.symptom = res.exerciseSymptomRiskOption[0].value
        this.content = res
        this.dialogVisible = true
      })
    },
    // 提价结果
    confirm() {
      this.formData.testSign = this.testSign
      this.formData.result = this.content.resultList[this.selectIndex].vmax
      submitResult(this.formData).then(() => {
        window.open(this.url + this.userSign, '_blank');
        this.dialogVisible = false
        // this.$router.push({
        //   name: "HeartRateReport",
        //   query: {
        //     sign: this.testSign
        //   }
        // })
      })
    }
  }
}
</script>

<style scoped lang="scss">
// 结果弹窗
.resultContent {
  padding-top: 36px;
  .radio-appearance {
    width: 20px;
    height: 20px;
  }
  > p {
    font-size: 18px;
    color: #374151;
    margin: 20px 0;
    font-weight: bold;
  }
  .radioBox {
    gap: 15px;
    > div {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      flex: 1;
      padding: 11px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .row {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    height: 74px;
    margin-top: 20px;
    b {
      font-size: 20px;
      color: #1f2937;
      padding-right: 10px;
    }
    > div {
      width: 185px;
      &:first-child {
        background: #59b2ff1a;
        text-align: center;
        height: 100%;
        padding-top: 10px;
        p {
          margin-top: 3px;
        }
      }
      &:nth-child(2) {
        color: #4b5563;
        font-size: 14px;
        flex: 1;
        padding: 0 12px;
      }
      &:last-child {
        border-left: 1px solid #e5e7eb;
        text-align: center;
        height: 100%;
        line-height: 74px;
      }
    }
  }
  .active {
    border-color: #59b2ff !important;
    background: #59b2ff0d;
    b, span {
      color: #59b2ff;
    }
  }
  .btnSubmit {
    background: #59b2ff;
    font-size: 18px;
    color: #fff;
    border-radius: 8px;
    padding: 12px 80px;
    width: fit-content;
    margin: 30px auto;
  }
}
</style>
<style lang="scss">
.headerDialog {
  background: #59b2ff;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 24px;
  border-radius: 5px 5px 0 0;
  .el-dialog__title, .el-dialog__close {
    color: #fff;
    font-weight: bold;
  }
}
</style>